<template>
  <a-modal
    :visible="show"
    width="80vw"
    min-height="60vh"
    title="日志设置"
    @ok="saveSetting"
    @cancel="handleCancle"
    :maskClosable="false"
    :key="show"
  >
    <a-form-model
      ref="ruleForm"
      :model="dataChangeSetting"
      :rules="rules"
      style="margin-top: 10px"
      label-width="160px"
      label-position="right"
    >
      <section>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="表名:">
              <a-input placeholder="选择数据库表名" v-model="dataChangeSetting.tableName" @change="changeTableName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="业务名称:">
              <a-input placeholder="业务名称" v-model="dataChangeSetting.busName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-radio-group v-model="dataChangeSetting.isVaild" button-style="solid">
              <a-radio-button v-for="(item, index) in yesOrNotOpt" :key="'taskType_' + index" :value="item.code"
                >{{ item.name }}
              </a-radio-button>
            </a-radio-group>
          </a-col>
        </a-row>
      </section>
      <section>
        <div class="influence-module">
          <!-- <div class="btn-box">
            <a-button type="primary" style="width: 80px; margin-right: 15px" @click="addInfluence"
              >新增</a-button
            >
            <a-button style="width: 80px; margin-right: 15px" @click="delInfluenceData">删除</a-button>
  
          </div> -->
          <a-table
            :columns="columns"
            :data-source="records"
            bordered
            rowKey="rowIndex"
            :pagination="false"
            style="margin-top: 5px"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          >
            <template slot="sortIndexRender" slot-scope="text, record, index">
              {{ index + 1 }}
            </template>
            <template slot="nameRender" slot-scope="text, record">
              <a-input placeholder="字段名" v-model="record.name" />
            </template>
            <template slot="commentsReander" slot-scope="text, record">
              <a-input placeholder="字段描述" v-model="record.comments" />
            </template>
            <template slot="codeTypeRender" slot-scope="text, record">
              <a-radio-group v-model="record.codeType" button-style="solid">
                <a-radio-button v-for="(item, index) in dictType" :key="'codeType_' + index" :value="item.code"
                  >{{ item.name }}
                </a-radio-button>
              </a-radio-group>
            </template>
            <template slot="codeRender" slot-scope="text, record">
              <a-input placeholder="字典类型" v-model="record.code" />
            </template>
            <template slot="keyFieldRender" slot-scope="text, record">
              <a-radio-group v-model="record.keyField" button-style="solid">
                <a-radio-button v-for="(item, index) in shiFo" :key="'taskType_' + index" :value="item.code"
                  >{{ item.name }}
                </a-radio-button>
              </a-radio-group>
            </template>
            <template slot="busKeyFieldRender" slot-scope="text, record">
              <a-radio-group v-model="record.busKeyField" button-style="solid">
                <a-radio-button v-for="(item, index) in shiFo" :key="'taskType_' + index" :value="item.code"
                  >{{ item.name }}
                </a-radio-button>
              </a-radio-group>
            </template>
            <template slot="isVaildRender" slot-scope="text, record">
              <a-radio-group v-model="record.isVaild" button-style="solid">
                <a-radio-button v-for="(item, index) in shiFo" :key="'taskType_' + index" :value="item.code"
                  >{{ item.name }}
                </a-radio-button>
              </a-radio-group>
            </template>
          </a-table>
        </div>
      </section>
    </a-form-model>
  </a-modal>
</template>
<script>
import { UtilsMixin } from '@/mixins/UtilsMixin'

import { postAction, getAction } from '@/api/manage'
export default {
  mixins: [UtilsMixin],
  data() {
    return {
      show: false,
      yesOrNotOpt: [
        { code: 1, name: '有效' },
        { code: 2, name: '无效' },
      ],
      shiFo: [
        { code: 1, name: '是' },
        { code: 2, name: '否' },
      ],
      dictType: [
        { code: 1, name: '数据字典' },
        { code: 2, name: 'JSON' },
      ],
      urls: {
        getTableColumn: '/common/getTableColumn',
        info: '/hteDataChangeSettiing/info',
        edit: '/hteDataChangeSettiing/edit',
      },
      selectedRowKeys: [],
      selectedRow: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      dataChangeSetting: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'sortIndex',
          scopedSlots: { customRender: 'sortIndexRender' },
          width: '80px',
          align: 'center',
        },
        {
          title: '字段名',
          dataIndex: 'name',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'nameRender' },
        },
        {
          title: '字段名称',
          dataIndex: 'busName',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'commentsReander' },
        },
        {
          title: '是否主键',
          dataIndex: 'keyField',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'keyFieldRender' },
        },
        {
          title: '是否业务键',
          dataIndex: 'busKeyField',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'busKeyFieldRender' },
        },
        {
          title: '是否记录',
          dataIndex: 'isVaild',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'isVaildRender' },
        },
         {
          title: '编码类型',
          dataIndex: 'codeType',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'codeTypeRender' },
        },
        {
          title: '编码',
          dataIndex: 'code',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'codeRender' },
        },
      ],
      records: [],
      changeTableNameTimeOut: null,
    }
  },
  methods: {
    init(id) {
      this.dataChangeSetting = { isDel: 0, isVaild: 1 }
      this.records = []
      if (id) {
        this.getSetting(id)
      }
      this.show = true
    },
    getSetting(id) {
      getAction(this.urls.info + '?id=' + id).then((res) => {
        if (res.success) {
          this.dataChangeSetting = res.result
          if (this.dataChangeSetting && this.dataChangeSetting.tableName) {
            this.getTableInfo()
          }
        }
      })
    },
    changeTableName() {
      if (this.dataChangeSetting.tableName) {
        if (this.changeTableNameTimeOut) {
          window.clearTimeout(this.changeTableNameTimeOut)
        }
        this.changeTableNameTimeOut = window.setTimeout(this.getTableInfo, 800)
      }
    },
    getTableInfo() {
      let tableName = this.dataChangeSetting.tableName
      if (tableName && tableName.indexOf('#') > 0) {
        tableName = tableName.substring(0, tableName.indexOf('#'))
      }
      if (!tableName) {
        return
      }
      getAction(this.urls.getTableColumn + '?tableName=' + tableName).then((res) => {
        if (res.success) {
          let list = res.result
          list.forEach((r) => {
            r.id = this.getRandomStr(10)
            r.isVaild = 1
            r.code = ''
            r.busKeyField = 2
            r.keyField = 2
            r.codeType = 1
          })
          this.records = list
          this.calcColumns()
        }
      })
    },
    calcColumns() {
      if (this.dataChangeSetting.property) {
        let propertys = JSON.parse(this.dataChangeSetting.property)
        if (propertys != null && propertys.length > 0) {
          propertys.forEach((p) => {
            let flag = false
            this.records.forEach((c) => {
              if (c.name == p.name) {
                flag = true
                c.comments = p.comments
                c.isVaild = p.isVaild
                c.code = p.code
                c.id = p.id
                c.busKeyField = p.busKeyField ? p.busKeyField : 2
                c.keyField = p.keyField ? p.keyField : 2
                c.codeType = p.codeType ? p.codeType : 1
              }
            })
            if (!flag) {
              this.records.push(p)
            }
          })
        }
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    saveSetting() {
      this.$set(this.dataChangeSetting, 'property', JSON.stringify(this.records))
      postAction(this.urls.edit, this.dataChangeSetting).then((res) => {
        if (res.success) {
          this.$message.success('保存成功')
          this.handleOk()
        }
      })
    },
    handleOk() {
      this.$emit('saveSuccess')
      this.handleCancle()
    },
    handleCancle() {
      this.show = false
    },
  },
}
</script>
